<template>
	<view>
		<!-- 备注弹出窗口 -->
		<u-popup :closeable="true" round="10" :show="popup.remarkShow" @close="remarkClose">
			<view class="h-[70vh] p-[20rpx]">
				<view class="">
					<view class="">
						填写备注
					</view>
					<view class="py-[20rpx]">
						<view class="" style="position: relative;">
							<view class="">
								<u-textarea ref="textarea" v-model="popup.remarks" :maxlength="50"
									placeholder="请输入订单备注内容"></u-textarea>
							</view>
							<view class="" style="position: absolute; right: 20rpx;bottom: 10rpx; color: #c0c4cc">
								{{popup.remarks.length>=50?50:popup.remarks.length}}/50
							</view>
						</view>
					</view>
					<view class="" style="padding: 20rpx 20rpx;
			  						position: fixed;
			  						bottom: 20rpx;width: calc(100% - 40rpx) ;   
									left-0;box-sizing: box-border;
			  						">
						<up-button @click="remarkSubmit" shape="circle" color="#FE861C">确认</up-button>
					</view>
				</view>
			</view>
		</u-popup>
	 <!-- 餐具选择 -->
		<u-picker 
		    @cancel="canceltableware"
			 @confirm="tablewares" 
			 :show="popup.show" 
			 :columns="columnstableware">
			 </u-picker>
			 <!-- 时间选择窗口 -->
			<u-datetime-picker 
			ref="datetimePickerRef" 
			:show="popup.showTime" 
			v-model="popup.prePickTime"
			 mode="time" 
			 :minHour="dataTimes"
			 @cancel="cancelTime" 
			  @confirm="confirmTime">
			  </u-datetime-picker>

	</view>

	<!-- 地址列表窗口 -->
			<u-popup :closeable="true" :show="popup.showAddress" @close="closeAddress" round="10">
				<view class="pb-[40rpx] stores">
					<view class="h-[700rpx] ">
						<view class="text-center pt-[20rpx]">
							选择收货地址
						</view>
						<view class="p-[20rpx] h-[ calc(100vh - 10rpx)]">
							<scroll-view @touchmove.stop.prevent style="height: 700rpx; " scroll-y="true">
								<!-- <u-radio-group v-model="popup.radioAddress" placement="column" > -->
									<view v-for="(item,index) in AddressList" :key="index" class="" @click="addressChange(item,index)">
										<view class="pt-[20rpx] flex justify-between">
											<view class="flex ">
												<view class="mr-[20rpx]" 
												style="">
													<view class="mt-[8rpx] flex 
														items-center
														 justify-center" 
													style="width: 40rpx ;height: 40rpx;border-radius: 50%;border: #FE861C 1rpx solid;">																									
															<view class="w-[25rpx] h-[25rpx]  " 
															:class="radioIndex == index?'bg-[#FE861C] rounded-[50%]':''">													
															</view>														
													</view>
												</view>
												<view class="">
													<up-text class="" :text="item.address " size="15"
														color="#010101"></up-text>
													<view class="pb-[20rpx] pt-[10rpx] text-[28rpx] text-[#777777]">
														{{item.realName}} {{item.phone}}
													</view>
												</view>
											</view>
											<view @click="updateAddress(item)" class="ml-[40rpx]">
												<image class="w-[31rpx] h-[31rpx]" src="@/static/my/address/edit.svg">
												</image>
											</view>
										</view>

										<u-line></u-line>

									</view>

								<!-- </u-radio-group> -->


								<view class="h-[calc(var(--bottom-button-height)+30px)]"></view>
								<view @click="goNewAddress()"
									class="py-[20rpx] px-[20rpx] w-full fixed left-0 bottom-0 box-border bg-[#fff]"
									style="width: 100%;">
									<!-- <up-button color="#FE861C" shape="circle" >新增地址</up-button> -->
									<up-button color="#FE861C" shape="circle"
										:customStyle="{height:' 96rpx',borderRadius:'20rpx',fontSize:'32rpx'}">新增地址</up-button>
								</view>
							</scroll-view>
						</view>
					</view>
				</view>
			</u-popup>
</template>

<script setup>
	import {reactive, ref} from "vue"
	import {
		addreses, //4.1.4.1 收获地址列表
} from "@/api/my.js"
import {
		onLoad,
		onShow,
		onReady
	} from '@dcloudio/uni-app';
    const porps = defineProps({
		popup:{
			type: Object,
			
		}
	})
	const columnstableware = reactive([
		  ['无需餐具', '需要餐具，商家依据餐量提供', '1份', '2份', '3份', '4份', '5份', '6份', '7份', '8份', '9份', '10份']
		]);
	const dataTimes = ref(null)
	const AddressList = ref([])
	const radioIndex = ref(0)
	dataTimes.value = new Date().getHours()
	// console.log("备注弹框",porps.popup);
	const emits = defineEmits([
		"remarkClose",
		"remarkSubmit",
		"canceltableware",
		"tablewares",
		"cancelTime",
		"confirmTime",
		"closeAddress",
		"addressChange",
		"getAddress"
		
		
		
	]);
	const remarkClose = () => {
		emits('remarkClose')
		
	}
	const remarkSubmit = () => {
		emits('remarkSubmit')
	}
	const canceltableware = () => {
		emits('canceltableware')
	}
	const tablewares = (n) => {
		emits('tablewares',n)
	}
	const cancelTime = () => {
		emits('cancelTime',)
	}
	const confirmTime = (n) => {
		emits('confirmTime',n)
	}
	const closeAddress = () => {
		emits('closeAddress')
	}
	const addressChange = (e,n)=>{
		radioIndex.value = n
		emits('addressChange',e,n)
		 console.log("选择地址",radioIndex.value);
	}
	onShow(() => {
	  	getaddress() //
		})
		onLoad(()=>{
		
		})
	const getaddress = ()=>{
			addreses().then(res => {
				if (res.code == 200) {
					AddressList.value = res.result //获取的地址列表
				  emits('getAddress',AddressList.value)
					}
			})  
		}
		
		//新增地址
	const goNewAddress = () => {
				uni.navigateTo({
					url: '/page_my/address/newaddress/newaddress'
				})
			}
	//修改地址
		const updateAddress = (item) => {
			// console.log("修改地址", item);
			uni.navigateTo({
				url: '/page_my/address/editAddress/editAddress?id=' + item.id
			})
		}
			// let groupChange = (e,n) => {
			// 	radioIndex.value = n
			// console.log("选择地址",e,n);
			// };
</script>

<style>

</style>